<template>
	<view class="ReservationConfirmation">
		<view class="head">
			<view class="head_one">
				<image :src="roomCategory.cover"
				  mode="" class="grayBox"
					></image>
			</view>
			<view class="head_two">
				<view class="ht_one">
					滕王阁希尔顿欢朋酒店
				</view>
				<view class="ht_two">
					{{orderInfo.orderType}}，1张大床
				</view>
				<view class="ht_three">
					灵活退改房价
				</view>
			</view>
		</view>
		<view class="one" v-if="isReOrder" @tap="showCalendar">
			<view class="one_one">
				<view class="one_one_left one_one_item">
					{{startWeekDay || '请选择'}}入住
				</view>
				<view class="one_one_right one_one_item">
					{{endWeekDay || '请选择'}}离店
				</view>
			</view>
			<view class="one_two">
				<view class="ot_o ot_item">
					{{startDate || '请选择日期'}}
				</view>
				<view class="ot_tw ot_item" v-if="startDate && endDate">
					{{minusNum}} 晚
				</view>
				<view class="ot_th ot_item">
					{{endDate || '请选择日期'}}
				</view>
			</view>
			<view class="line">
			</view>
			<view class="one_three" @click.stop="roomPopup">
				{{orderInfo.roomCount}}间客房，{{orderInfo.personCount}}位成年人，{{orderInfo.youngCount}}位未成年人
			</view>
		</view>
		<view class="one" v-else>
			<view class="one_one">
				<view class="one_one_left one_one_item">
					{{orderInfo.startWeekDay}}入住
				</view>
				<view class="one_one_right one_one_item">
					{{orderInfo.endWeekDay}}离店
				</view>
			</view>
			<view class="one_two">
				<view class="ot_o ot_item">
					{{orderInfo.startDay}}
				</view>
				<view class="ot_tw ot_item">
					{{orderInfo.minusNum}} 晚
				</view>
				<view class="ot_th ot_item">
					{{orderInfo.endDay}}
				</view>
			</view>
			<view class="line">
			</view>
			<view class="one_three" @click="roomPopup">
				{{orderInfo.roomCount}}间客房，{{orderInfo.personCount}}位成年人，{{orderInfo.youngCount}}位未成年人
			</view>
		</view>
		<view class="two">
			<view class="two_one t_item">
				<image src="/static/images/ReservationConfirmation/warn.png" mode="" class="img"></image>
				<view class="text text1">
					免费取消期限已过
				</view>
			</view>
			<view class="two_line">
			</view>
			<view class="two_two t_item">
				<image src="/static/images/ReservationConfirmation/success.png" mode="" class="img"></image>
				<view class="text text2">
					全额预付，确保预订成功
				</view>
			</view>
			<view class="two_three">
				<view class="tt_left">
					在线支付
				</view>
				<view class="tt_right">
					¥{{orderInfo.orderAmount / 100}}
				</view>
			</view>
		</view>
		<view class="three">
			<view class="uni-form-item uni-column">
				<view class="th_guestName">入住人</view>
				<input class="th_guestName_t" placeholder="请输入入住人(必填)" v-model="orderInfo.guestName"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="th_phone">联系电话</view>
				<input class="th_phone_t" maxlength="11" type="number" placeholder="请输入联系电话(必填)" v-model="orderInfo.guestMobile"/>
			</view>
			<view class="th_one">
				备注
			</view>
			<textarea placeholder="备注信息、房间偏好等(可选填)" class="remark" v-model="orderInfo.userRemark" />
			<view class="th_two">
				<image src="/static/images/ReservationConfirmation/dout.png" mode="" class="doutImg"></image>
				<div class="th_two_text">
					您的备注请求可能存在无法满足的情况，需根据酒店实际情况和房态尽量安排，敬请谅解。
				</div>
			</view>
		</view>
		<view class="four">
			<view class="four_t1 box">
				<view class="t1_title title">
					预订须知
				</view>
				<view class="four_text four_text1">
					预订需提前至少24小时，取消预订需提前至少48小时，否则将收取一定费用；入住时间为下午2点，离店时间为中午12点，提前入住或延迟离店将根据实际情况收取额外费用；如需办理入住手续，请携带有效身份证件；酒店不对客人遗失物品负责。
				</view>
			</view>
			<view class="four_t2 box">
				<view class="t2_title title">
					预订确认
				</view>
				<view class="four_text four_text2">
					预订成功后，酒店将通过电话或电子邮件与您确认；如有任何疑问或变更，请及时与酒店联系。
				</view>
			</view>
			<view class="four_t3 box">
				<view class="t3_title title">
					注意事项
				</view>
				<view class="four_text four_text3">
					请提前了解酒店政策，包括退款政策、宠物政策等；酒店将尽力满足您的特殊要求，但无法保证一定能满足；如有其他需求或疑问，请在预订表中注明或与酒店联系。
				</view>
			</view>
		</view>
		<view class="purchase button" @click="saveOrder">
			立即预订 {{orderInfo.orderAmount / 100}}元
		</view>

		<uni-popup ref="roomNumPopup" type="dialog" borderRadius="30rpx 30rpx 30rpx 30rpx" backgroundColor="#ffffff"
			@change="chgPopup">
			<view class="boxSize_bb roomAndPeople" style="background-color: #ffffff; color: black;">
				<view class="rp_item flex_jcsb" v-for="(item, index) in roomNumList" :key="index">
					<view class="rp_item_left">
						{{ item.name }}
					</view>
					<view class="rp_item_right flex">
						<image src="/static/images/ShoppingCart/decrease.png" mode=""
							style="width: 40rpx;height: 40rpx;" class="rpir_one" @tap="reMinusNum(index, item)" />
						<text class="rpir_two">{{ item.num }}</text>
						<image src="/static/images/ShoppingCart/increase.png" mode=""
							style="width: 40rpx;height: 40rpx;" class="rpir_three" @tap="reAddNum(index, item)" />
					</view>
				</view>
				<view class="button" style="height: 80rpx; margin-top: 60rpx; border-radius: 40rpx;"
					@tap="roomNumClose">
					确定
				</view>
			</view>
		</uni-popup>

		<!-- 日历弹窗 -->
		<uni-popup
			ref="canlendarPop"
			type="center"
			background-color="#fff"
			@change="chgPopup"
		>
			<view class="boxSize_bb calendarPop flexDeCo" style="width: 80vw;">
				<view class="calendarTop flex_jcsb boxSize_bb"
					style="width: 80vw; padding-left: 30rpx;padding-right: 30rpx; margin-bottom: 20rpx;">
					<view class="ct_left ct_item flexDeCo" style="margin-left: 20rpx;">
						<view class="cti_top">入住</view>
						<template v-if="startDate">
							<view class="cti_bottom"> {{startDate}} <text style="margin-left: 5rpx;">{{startWeekDay}}</text>
							</view>
						</template>
						<template v-else>
							<view style="font-size: 28rpx;color: darkgray;">请选择入住日期</view>
						</template>
					</view>
					<view class="ct_right ct_item flexDeCo" style="margin-left: 20rpx;">
						<view class="cti_top">离店</view>
						<template v-if="endDate">
							<view class="cti_bottom"> {{endDate}} <text style="margin-left: 5rpx;">{{endWeekDay}}</text>
							</view>
						</template>
						<template v-else>
							<view style="font-size: 28rpx;color: darkgray;">请选择离店日期</view>
						</template>
					</view>
				</view>
				<uni-calendar
					:insert="true"
					:start-date="todayDate"
					:range="true"
					style="width: 70vw;"
					:clear-date="true"
					@change="calendarChange"
				/>
				<view class="calendarSure button"
					style="margin: 40rpx auto 0 auto ;width: 70vw; height: 80rpx; border-radius: 40rpx;"
					@tap="closeCalendarPop">确定
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		createOrder,
		syncOrder,
		getCategoryById
	} from "../../api/room";
	import {
		navigateTo,
		getProvider,
		showModal,
		showToast,
		uniLogin
	} from "../../utils/promise"
	import getWeekDay from '../../utils/weekDay';
	import getToday from '../../utils/getToday';
	import getNextDay from '../../utils/getNextDay';
	import spliceMMDD from '../../utils/stringSpliceMMDD';
	export default {
		data() {
			return {
				orderInfo: {},
				isReOrder: false,
				// 日期选择相关
				startDate: '',
				endDate: '',
				startWeekDay: '',
				endWeekDay: '',
				minusNum: 0,
				todayDate: getToday(),
				roomCategory: {},
				roomNumList: [
          {
						name: "房间数",
						num: 0,
					},
					{
						name: "成年人",
						num: 0,
					},
					{
						name: "未成年人",
						num: 0,
					},
				],
			};
		},
		methods: {
			roomPopup() {
				this.$refs.roomNumPopup.open("center")
			},
			roomNumClose() {
				this.$refs.roomNumPopup.close()
			},
			reMinusNum(index, item) {
        const { name, num } = item
        if (name === '未成年人') {
          if (num <= 0) return
          this.roomNumList[index].num--
          this.orderInfo.youngCount = this.roomNumList[index].num
          return
        }
				if (num <= 1) {
					return showToast({
						title: "数量至少为1"
					})
				}
				this.roomNumList[index].num--
        if (name === '成年人') {
          this.orderInfo.personCount = this.roomNumList[index].num
          return
        }
        if (name === '房间数') {
          this.orderInfo.roomCount = this.roomNumList[index].num
          this.orderInfo.orderAmount = this.orderInfo.roomCount * this.roomCategory.price
          return
        }
			},
			reAddNum(index, item) {
        const { name } = item
				this.roomNumList[index].num++
        if (name === '未成年人') {
          this.orderInfo.youngCount = this.roomNumList[index].num
          return
        }
        if (name === '成年人') {
          this.orderInfo.personCount = this.roomNumList[index].num
          return
        }
        if (name === '房间数') {
          this.orderInfo.roomCount = this.roomNumList[index].num
          this.orderInfo.orderAmount = this.orderInfo.roomCount * this.roomCategory.price
          return
        }
			},
			goToOrderDetail(orderNo) {
				uni.navigateTo({
					url: "/pages/OrderDetailsPage/OrderDetailsPage?orderNo="+orderNo
				});
			},
			async onLoad(params) {
				const orderInfo = JSON.parse(params.order)

				const res = await getCategoryById({ id: orderInfo.categoryId })
				this.roomCategory = res.data

				this.isReOrder = orderInfo.isReOrder || false
				if(this.isReOrder) {
					// 再次预定模式
					// 获取房间当前价格
					try {
						// todo
						// const res = await Promise.resolve({
						// 	code: 200,
						// 	data: {
						// 		price: 0.01
						// 	}
						// })
						if(res.code === 200) {
							const roomPrice = res.data.price // 接口返回的价格单位是元
							this.orderInfo = {
								guestName: orderInfo.guestName,
								guestMobile: orderInfo.guestMobile,
								userRemark: orderInfo.userRemark || '',
								roomCount: orderInfo.roomQuantity || 1,
								personCount: orderInfo.adultsQuantity || 1,
								youngCount: orderInfo.childQuantity || 0,
								categoryId: orderInfo.categoryId,
								categoryName: orderInfo.categoryName,
								orderType: orderInfo.categoryName,
								roomPrice: roomPrice, // 单价(元/间/晚)
								orderAmount: 0 // 等待选择日期后计算
							}
              this.roomNumList[0].num = this.orderInfo.roomCount
              this.roomNumList[1].num = this.orderInfo.personCount
              this.roomNumList[2].num = this.orderInfo.youngCount
						} else {
							showToast({
								icon: "none",
								title: "获取房间价格失败"
							})
						}
					} catch(err) {
						console.error(err)
						showToast({
							icon: "none",
							title: "获取房间价格失败"
						})
					}
				} else {
					// 普通预定模式
					this.orderInfo = orderInfo
          const {
            roomCount,
            personCount,
            youngCount,
          } = orderInfo
          this.roomNumList[0].num = roomCount
          this.roomNumList[1].num = personCount
          this.roomNumList[2].num = youngCount
				}
			},
			saveOrder() {
				this.token = uni.getStorageSync("userToken")
				if (!this.token) {
					uni.showToast({
						icon: "error",
						title: '请先登录',
						duration: 1000,
						complete: () => {
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/HiltonHotelPage'
								})
							}, 1000)
						},
					})
					return
				}


				//映射后台字段
				let orderObj = {}
				let e = this.orderInfo

				// 基础校验
				if(e.guestName==null){
					showToast({
						icon: "none",
						title: "请输入入住姓名"
					})
					return
				}
				if(e.guestMobile==null){
					showToast({
						icon: "none",
						title: "请输入联系电话"
					})
					return
				}

				if(this.isReOrder) {
					// 再次预定模式特殊校验
					if(!this.startDate || !this.endDate) {
						showToast({
							icon: "none",
							title: "请选择入住和离店日期"
						})
						return
					}

					// 再次预定模式字段映射
					orderObj = {
						guestName: e.guestName,
						guestMobile: e.guestMobile,
						userRemark: e.userRemark || '',
						adultsQuantity: e.personCount,
						childQuantity: e.youngCount,
						roomQuantity: e.roomCount,
						bookingCheckInDate: this.startDate,
						bookingCheckOutDate: this.endDate,
						categoryId: e.categoryId,
						categoryName: e.categoryName,
						totalPrice: e.orderAmount,
						discountPrice: 0,
						payPrice: e.orderAmount,
						orderStatus: 1
					}
				} else {
					// 普通预定模式字段映射
					orderObj = {
						guestName: e.guestName,
						guestMobile: e.guestMobile,
						userRemark: e.userRemark || '',
						adultsQuantity: e.personCount,
						childQuantity: e.youngCount,
						roomQuantity: e.roomCount,
						bookingCheckInDate: e.startDay,
						bookingCheckOutDate: e.endDay,
						categoryId: e.categoryId,
						categoryName: e.orderType,
						totalPrice: e.orderAmount,
						discountPrice: 0,
						payPrice: e.orderAmount,
						orderStatus: 1
					}
				}

				const data = {
					roomOrder: {
						...orderObj,
						agentUserId: uni.getStorageSync("agentUserId"),
					},
					tradeTypeId: 1
				}

				createOrder(data).then((res) => {
          if (res.code === 200 && res.data !== null) {
            const orderNo = res.data.orderNo
            uni.showLoading({
              title: "支付中..."
            })
            wx.requestPayment({
              timeStamp: res.data.timeStamp, //时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
              nonceStr: res.data.nonceStr, //随机字符串，长度为32个字符以下。
              package: res.data.packageDate, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
              signType: res.data.signType, //签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
              paySign: res.data.paySign, //密钥
              success: (res) => {
                uni.hideLoading()
                uni.showToast({
                  title: "支付成功",
                  icon: "none",
                });
                syncOrder(orderNo).then((res1) => {
                  console.log(res1)
                  //跳转订单详情页面
                  this.goToOrderDetail(orderNo)
                }).catch(() => {
                  setTimeout(() => {
                    this.goToOrderDetail(orderNo)
                  }, 2000)
                })

              },
              fail: (err) => {
                uni.hideLoading()
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                });
                  uni.navigateTo({
                    url: `/pages/AllOrderPage/AllOrderPage?tab=customer`
                  })
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg,
            });
          }
				}).catch((err) => {
					console.log(err)
				})
			},
			showCalendar() {
				this.$refs.canlendarPop.open('center');
			},
			calendarChange(e) {
				const { before, after } = e.range
				if (before < getToday()) {
					showToast({
						icon: "none",
						title: "入住日期不能小于今日，请重新选择!"
					})
					e.range.before = ''
					e.range.after = ''
					e.range.data = []
					this.startDate = ''
					this.endDate = ''
					this.startWeekDay = ''
					this.endWeekDay = ''
					return
				}
				if(before && after && before > after){
					showToast({
						icon: "none",
						title: "离店日期不能大于入住日期，请重新选择!"
					})
					e.range.before = ''
					e.range.after = ''
					e.range.data = []
					this.startDate = ''
					this.endDate = ''
					this.startWeekDay = ''
					this.endWeekDay = ''
					return
				}
				this.startDate = before;
				this.endDate = after;
				this.startWeekDay = this.startDate && getWeekDay(this.startDate);
				this.endWeekDay = this.endDate && getWeekDay(this.endDate);

				if(this.startDate && this.endDate) {
					let date1 = new Date(this.startDate);
					let date2 = new Date(this.endDate);
					let diffMilliseconds = date2 - date1;
					let diffDays = diffMilliseconds / (1000 * 60 * 60 * 24);
					this.minusNum = diffDays;
					// 计算订单金额
					if(this.orderInfo.roomPrice) {
						this.orderInfo.orderAmount = this.orderInfo.roomPrice * this.orderInfo.roomCount * this.minusNum;
					}
				}
			},
			closeCalendarPop() {
				if(!this.startDate){
					showToast({
						icon: "none",
						title: "请选择入住日期!"
					})
					return
				}
				if(!this.endDate){
					showToast({
						icon: "none",
						title: "请选择离店日期!"
					})
					return
				}
				if(this.startDate && this.endDate && this.startDate > this.endDate){
					showToast({
						icon: "none",
						title: "离店日期不能大于入住日期，请重新选择!"
					})
					return
				}
				this.$refs.canlendarPop.close()
			},
			chgPopup(e) {
				console.log(e)
			},
		},

	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.ReservationConfirmation {
		font-family: 'PingFang SC';
		width: 100vw;
		min-height: 100vh;
		background-color: rgb(245, 245, 245);
		padding-bottom: 40rpx;

		.roomAndPeople {
			width: 80vw;
			height: auto;
			padding-left: 40rpx;
			padding-right: 40rpx;
			// padding-bottom: 40rpx;

			.rp_item {
				margin-top: 40rpx;
				border-bottom: 0.5rpx solid #f5f5f5;
				box-sizing: border-box;
				padding-bottom: 40rpx;

				.rp_item_right {
					align-items: center;
				}


				.rpir_two {
					margin-left: 20rpx;

				}

				.rpir_three {
					margin-left: 20rpx;

				}
			}

			.button {
				margin-bottom: 40rpx;
			}
		}

		.head {
			width: 750rpx;
			height: 220rpx;
			background: #FFFFFF;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;



			.head_one {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				background: #D9D9D9;
			}

			.head_two {
				display: flex;
				flex-direction: column;
				// justify-content: flex-start;
				// align-items: center;
				align-items: flex-start;
				margin-left: 20rpx;

				.ht_one {
					// width: 238rpx;
					// height: 48rpx;
					font-weight: 700;
					font-size: 30rpx;
					// line-height: 48rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #000000;


				}

				.ht_two {
					// width: 384rpx;
					// height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					// line-height: 36rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #979797;
					margin-top: 20rpx;

				}

				.ht_three {
					// width: 156rpx;
					// height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					// line-height: 36rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #979797;
					margin-top: 30rpx;

				}
			}


		}

		.one {
			width: 750rpx;
			height: 282rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin-top: 18rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.one_one {
				display: flex;
				justify-content: space-between;

				.one_one_item {
					// width: 104rpx;
					// height: 36rpx;
					font-weight: 400;
					font-size: 26rpx;
					// line-height: 36rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #979797;
				}

			}

			.one_two {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.ot_item {
					font-weight: 600;
					font-size: 40rpx;
					// line-height: 56rpx;
					letter-spacing: 0px;
					text-align: center;
					color: #222222;
				}

				.ot_o {
					// width: 208rpx;
					// height: 56rpx;
				}

				.ot_tw {
					// width: 78rpx;
					// height: 56rpx;
				}

				.ot_th {
					// width: 208rpx;
					// height: 56rpx;
				}
			}

			.line {
				width: 690rpx;
				margin: 30rpx auto 0 auto;
				left: 823px;
				border-width: 0.5pc;
				border: 0.5px solid #EDEDED
			}

			.one_three {
				// width: 220rpx;
				// height: 40rpx;
				font-weight: 400;
				font-size: 28rpx;
				// line-height: 40rpx;
				letter-spacing: 0px;
				text-align: center;
				color: #222222;
				margin-top: 29rpx;
				display: flex;
			}
		}

		.two {
			width: 750rpx;
			height: 300rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 30rpx;

			.two_line {
				width: 690rpx;
				top: 818rpx;
				border-width: 1rpx;
				border: 0.5px solid #EDEDED;
				margin-top: 30rpx;
			}

			.t_item {
				display: flex;
				margin-top: 30rpx;

				.img {
					width: 32rpx;
					height: 32rpx;
				}



				.text1 {
					// width: 224rpx;
					// height: 40rpx;
				}

				.text2 {
					// width: 308rpx;
					// height: 40rpx;
				}

				.text {

					font-weight: 400;
					font-size: 28rpx;
					// line-height: 40rpx;
					letter-spacing: 0px;
					color: #222222;
					margin-left: 20rpx;

				}
			}

			.two_three {
				display: flex;

				justify-content: space-between;
				margin-top: 30rpx;

				.tt_left {
					// width: 112rpx;
					// height: 40rpx;
					font-weight: 400;
					font-size: 28rpx;
					// line-height: 40rpx;
					letter-spacing: 0px;
					color: #222222;

				}

				.tt_right {
					// width: 120rpx;
					// height: 56rpx;
					font-weight: 600;
					font-size: 40rpx;
					// line-height: 56rpx;
					letter-spacing: 0px;
					color: #FF4D00;
				}

			}

		}

		.three {
			width: 750rpx;
			height: 550rpx;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			flex-direction: column;

			.th_one {
				margin-top: 26rpx;
				width: 64rpx;
				height: 44rpx;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				letter-spacing: 0px;
				color: #222222;
			}

			.th_phone {
				margin-top: 26rpx;
				width: 150rpx;
				height: 44rpx;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				letter-spacing: 0px;
			}

			.th_phone_t {
				margin-top: 26rpx;
				font-size: 28rpx;
			}

			.th_guestName {
				width: 150rpx;
				height: 44rpx;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 44rpx;
				letter-spacing: 0px;
			}

			.th_guestName_t {
				margin-top: 26rpx;
				font-size: 28rpx;
			}

			.remark {
				margin-top: 26rpx;
				font-size: 28rpx;
			}

			.th_two {
				display: flex;
				padding-top: 30rpx;

				.doutImg {
					width: 36rpx;
					height: 36rpx;
				}

				.th_two_text {
					width: 634rpx;
					height: 72rpx;
					font-weight: 400;
					font-size: 24rpx;
					letter-spacing: 0px;
					color: #979797;
					margin-left: 20rpx;
					line-height: 40rpx;
				}
			}

		}

		.four {
			// width: 750rpx;
			// height: 852rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.box {
				margin-top: 60rpx;
			}

			.four_t1 {
				margin-top: 0;
			}

			.title {
				font-weight: 400;
				font-size: 28rpx;
				letter-spacing: 0px;
				color: #222222;
				// margin-top: 60rpx;
			}

			.four_text {
				// width: 690rpx;
				// height: 178rpx;
				font-weight: 400;
				font-size: 24rpx;
				letter-spacing: 0px;
				color: #979797;
				margin-top: 26rpx;
				line-height: 40rpx;

			}

			.four_text1 {
				// width: 690rpx;
				// height: 178rpx;


			}

			.four_text2 {
				// width: 690rpx;
				// height: 178rpx;
			}

			.four_text3 {
				// width: 690rpx;
				// height: 106rpx;


			}

			.t1_title {
				// width: 128rpx;
				// height: 44rpx;
				font-weight: 600;
				font-size: 32rpx;
				// line-height: 44rpx;
				letter-spacing: 0px;

			}


		}

		.purchase {
			width: 670rpx;
			height: 88rpx;
			border-radius: 60rpx;
			background: #0F4C97;
			margin: 40rpx auto 0 auto;
			color: #FFFFFF;

		}

		//日历弹窗样式
		::v-deep .u-calendar {
			position: relative !important;
		}

		::v-deep .uni-calendar-item__weeks-box-item {
			width: 60rpx;
			height: 60rpx;
		}

		.calendarPop {
			padding-left: 30rpx;
			padding-right: 30rpx;
			justify-content: center;
			align-items: center;
			padding-top: 40rpx;
			padding-bottom: 40rpx;

			.calendarTop {
				.ct_item {
					justify-content: center;
					align-items: center;

					.cti_top {
						color: darkgray;
						font-size: 24rpx;
					}

					.cti_bottom {
						margin-top: 10rpx;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>
